<template>
	<view :class="[primarySize()]">
		<view @click="hideFilter" class="zz" v-if='showFilter'></view>
		<view class="container plr30 pb30">
			<view class="tab_main">
				<view class="tab flex-box">
					<view class="flex-grow-1 flex-box flex-center tab_nav"
						:class="[filterTabIndex==0&&showFilter?'active':'']" @click="tab(0)">区域</view>
					<view class="flex-grow-1 flex-box flex-center tab_nav"
						:class="[filterTabIndex==1&&showFilter?'active':'']" @click="tab(1)">行业</view>
					<view class="flex-grow-1 flex-box flex-center tab_nav"
						:class="[filterTabIndex==2&&showFilter?'active':'']" @click="tab(2)">规模</view>
				</view>
				<!-- 区域 -->
				<view class="tab_tc tab_address flex" v-if='showFilter && filterTabIndex==0'>
					<scroll-view scroll-y class="list_left">
						<view @click="bindTabSubIndexChange(0)" :class="[filterTab1SubIndex=='0'?'active':'']">附近</view>
						<view @click="bindTabSubIndexChange(1)" :class="[filterTab1SubIndex=='1'?'active':'']">区域</view>
					</scroll-view>
					<scroll-view scroll-y class="list_right" v-if="filterTab1SubIndex==0">
						<view :class="[query.distance?'':'active']" @click="bindDistanceChange()" data-distance="">不限
						</view>
						<view :class="[query.distance==item?'active':'']" @click="bindDistanceChange(item)"
							v-for="(item,index) in nearbyArr">{{item}}公里</view>
					</scroll-view>
					<scroll-view scroll-y class="list_right" v-if="filterTab1SubIndex==1">
						<view @click="bindDistrictChange()" :class="[query.district_id?'':'active']">不限</view>
						<view @click="bindDistrictChange(200,item.id)" v-for="(item,index) in districts"
							:class="[query.district_id==item.id?'active':'']">{{item.name}}</view>
					</scroll-view>
				</view>

				<view class="tab_tc tab_type flex" v-if='showFilter&&filterTabIndex==1'>

					<scroll-view scroll-y class="list_left">
						<view class="active">行业分类</view>
					</scroll-view>
					<scroll-view scroll-y class="list_right clearfix">
						<view class="trade_item" v-if="[query.category_id?'':'active']" @click="bindCategoryChange()">不限
						</view>
						<view v-for="(item,index) in categories" @click="bindCategoryChange(item.id)" class="trade_item"
							:class="[query.category_id==item.id?'active':'']">{{item.name}}
						</view>
					</scroll-view>

				</view>

				<!-- 规模 -->
				<view class="tab_tc tab_address flex" v-if='showFilter&&filterTabIndex==2'>
					<scroll-view scroll-y class="list_left">
						<view class="active">规模</view>
					</scroll-view>
					<scroll-view scroll-y class="list_right">
						<view :class="query.scale_id?'':'active'" @click="bindScaleChange()">不限</view>
						<view v-for="(item,index) in scales" :class="[query.scale_id==item.id?'active':'']"
							@click="bindScaleChange(item.id)">{{item.name}}</view>
					</scroll-view>
				</view>
			</view>
			<business-list :business='companyList'></business-list>
			<view class="nothing" v-if="companyListMore.nothing">
				<image src="https://admin.mosizp.cn/static/public/icon_nothing.png" mode="aspectFit"></image>
				<text>暂无企业</text>
			</view>
			<button @click="fetch" v-else hover-class="none" class="more_btn mt30">{{companyListMore.text}}</button>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import businessList from '../../components/business/business.vue';
	export default {
		components: {
			businessList
		},
		data() {
			return {
				business: [],

				companyList: [],
				companyListMore: {
					page: 1
				},
				showFilter: false, //显示条件弹出层
				filterTabIndex: 0, //条件层tab index

				filterTab1SubIndex: "0",
				filterTab2SubIndex: "0",
				filterTab3SubIndex: "0",
				query: {},
				param: 0,
				categories: [],
				districts: [],
				nearbyArr: [1, 3, 5, 7, 10],
				scales: []
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.primaryColor()
			})
		},
		onLoad() {
			let page = this;
			var query = uni.createSelectorQuery();
			query.select('.tab').boundingClientRect(function(res) {
				page.offset_top = res.top
			}).exec();

			this.currentCity = this.$core.getCurrentCity()
			this.$util.getAreas(null, false).then((districts) => {
				page.districts = districts
			})
			this.$util.getIndustryCategories().then(industryCategories => {
				page.categories = industryCategories
			});
			this.$util.getCompanyScales().then(function(scales) {
				page.scales = scales
			});
			//获取定位
			uni.getLocation({
				success: res => {
					page.query.pos = res.longitude + ',' + res.latitude
				},
				fail: res => {
					console.log(res);
				}
			});
			this.fetch();
			uni.$on(getApp().globalData.Events.CurrentCityChange, this.eventOnCurrentCityChange, this);
		},
		onUnload() {
			uni.$off(getApp().globalData.Events.CurrentCityChange, this.eventOnCurrentCityChange);
		},
		onShow() {
			if (this.refreshOnShow) {
				this.refreshOnShow = false
				this.refresh(true);
			}
		},
		methods: {
			tab(index) {
				if (this.showFilter && this.filterTabIndex == index) {
					this.hideFilter();
				} else {
					this.showFilter = true
					this.filterTabIndex = index

				}
			},
			hideFilter() {
				this.showFilter = false

			},
			refresh(clearQuery = false) {
				this.companyList = [],
					this.companyListMore = {
						page: 1
					},
					this.showFilter = false
				if (clearQuery) {
					this.query = {}
				}
				this.fetch();
			},
			fetch() {
				this.$util.fetch(this, '/xilujob.company/lists', this.query, 'companyListMore', 'companyList', 'data');
			},
			bindResetFormQuery() {
				this.query.work_experience_id = ''
				this.query.type = ''
				this.query.education_level_id = ''
				this.query.benefit_id = ''
				this.query.refresh_days = ''

			},
			bindFormQueryConfirm() {
				this.refresh();
			},
			bindTabSubIndexChange(index) {
				this.filterTab1SubIndex = index
				
			},

			bindCategoryChange(id) {
				this.query.category_id = id || '',
					this.refresh();
			},

			bindScaleChange(id) {
				this.query.scale_id = id || ''
				this.refresh();
			},
			//选择附近
			bindDistanceChange(distance) {
				if (!this.query.pos) {
					uni.showToast({
						title: '定位失败,请到设置同意授权',
						icon: 'none'
					});
					return;
				}
				this.query.distance = distance
				this.refresh();
			},
			//选择地区
			bindDistrictChange(district, id) {
				this.query.district_id = id || ''
				this.filterTab2Name = district ? district.name : '不限'
				this.query.distance = ''
				this.refresh();
			},
			//选择薪资
			bindSalaryOptionChange(type, min, max, id) {
				this.query.salary_type = type
				this.query.salary_min = min
				this.query.salary_max = max
				this.query.salary_option_id = id
				this.refresh();
			},
			eventOnCurrentCityChange(currentCity) {
				this.currentCity = currentCity
				let pages = getCurrentPages();
				//如果当前页面正在显示, 刷新此页； 否则下次显示时刷新
				if (pages[pages.length - 1] === this) {
					this.refresh(true);
				} else {
					this.refreshOnShow = true
				}
				//悄悄更新区数据
				this.$util.getAreas(null, false).then((districts) => {
					this.districts = districts
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tab_nav {
		line-height: 84rpx;
	}

	.tab_nav.active::after {
		border-left-color: transparent;
		border-right-color: transparent;
		border-top-color: transparent;
		border-bottom-color: var(--primary);
		margin-top: -5rpx
	}

	.tab_nav::after {
		content: '';
		width: 0px;
		height: 0px;
		border: 10rpx solid #666;
		border-left-color: transparent;
		border-right-color: transparent;
		border-top-color: #999999;
		border-bottom-color: transparent;
		margin-left: 16rpx;
		margin-top: 10rpx;
		line-height: 84rpx;
	}

	.list_left {
		width: 210rpx;
	}

	.tab_tc {
		position: absolute;
		top: 84rpx;
		left: 0;
		right: 0;
		background-color: #fff;
		z-index: 20;
		height: 460rpx;
	}

	.tab_main {
		position: sticky;
		z-index: 30;
		background-color: #fff;
		top: 0
	}

	.list_left {
		line-height: 100rpx;
		width: 210rpx;
		text-align: left;
		background-color: #FFFFFF
	}

	.list_left view {
		position: relative;
		font-size: 24rpx;
		width: 100%;
		padding-left: 30rpx;
		padding-right: 20rpx;
		line-height: 100rpx;
	}

	.list_left view.active::after {
		content: "";
		position: absolute;
		left: 10rpx;
		top: 50%;
		transform: translateY(-50%);
		width: 5rpx;
		height: 80rpx;
		background-color: var(--primary)
	}

	.list_right {
		background-color: #FAFBFB
	}

	.list_right view {
		padding: 0 83rpx;
		line-height: 100rpx;
		box-sizing: border-box;
		font-size: 24rpx;
		color: #6e7075
	}

	.list_right view.active {
		color: var(--primary)
	}

	.tab_address {
		height: 460rpx;
	}

	.tab_main {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 20;
		background-color: #fff;
	}

	.container {
		padding-top: 100rpx
	}

	.zz {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.6);
		text-align: center;
		z-index: 20;
	}
</style>